<template>
  <div>
    <el-form :inline="true" :model="formInline">
      <el-form-item label="类型">
        <el-select v-model="category_value" placeholder="请选择" size="mini" style="width:120px;">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="日期">
        <el-date-picker
          v-model="date_value"
          type="datetimerange"
          align="right"
          start-placeholder="开始日期"
          end-placeholder="结束如期"
          :default-time="['12:00:00', '08:00:00']"
          size="mini"
          format="yyyy 年 MM 月 dd 日 HH:mm:ss"
          value-format="yyyy-MM-dd HH:mm:ss"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item label="关键字">
        <el-select v-model="search_key" placeholder="请选择" size="mini" style="width:100px;">
          <el-option
            v-for="item in options2"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-input v-model="search_value" placeholder="请输入内容" size="mini"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="danger" size="mini" @click="getList">搜索</el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="danger" size="mini" @click="dialog_info = true">新增</el-button>
      </el-form-item>
    </el-form>

    <!--表格-->
    <el-table
      :data="tableData.item"
      style="width: 100%"
      size="mini"
      v-loading="tableData.loading"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="45" align="center"></el-table-column>
      <el-table-column prop="title" label="标题" width="300" align="center"></el-table-column>
      <el-table-column
        prop="categoryId"
        label="类型"
        align="center"
        :formatter="toCategory"
      ></el-table-column>
      <el-table-column
        prop="createDate"
        label="日期"
        align="center"
        :formatter="toDate"
      ></el-table-column>
      <el-table-column prop="user" label="作者" align="center"></el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <el-button type="danger" size="mini" @click="deleteItem(scope.row.id)">删除</el-button>
          <el-button type="success" size="mini" @click="editInfo(scope.row.id)">编辑</el-button>
          <!--<router-link
            :to="{ name: 'article-detail', query: { id: scope.row.id, title: scope.row.title } }"
            class="margin-left-10"
          >
            <el-button type="success" size="mini"
              >编辑详情</el-button
            >
          </router-link>-->
          <el-button type="success" size="mini" @click="detailed(scope.row)">编辑详情</el-button>
        </template>
      </el-table-column>
    </el-table>

    <div class="blank-space-30"></div>

    <!--底部分页-->
    <el-row>
      <el-col :span="12">
        <el-button size="medius" @click="deleteAll">批量删除</el-button>
      </el-col>
      <el-col :span="12">
        <el-pagination
          class="pull-right"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          background
          layout="total, sizes, prev, pager, next, jumper"
          :total="tableData.total"
          :current-page="tableData.pageNumber"
          :page-size="tableData.pageSize"
        >
        </el-pagination>
      </el-col>
    </el-row>

    <!--新增弹窗-->
    <DialogInfo :flag.sync="dialog_info" :category="options" />
    <!--修改弹窗-->
    <DialogEditInfo
      :flag.sync="dialog_info_edit"
      :id="editId"
      :category="options"
      @getList="getList"
    />
  </div>
</template>

<script>
import { reactive, ref, onMounted } from "@vue/composition-api";
import DialogInfo from "./dialog";
import DialogEditInfo from "./dialog/edit";
import { useConfirm } from "../../utils/composition-function";
import { getArticleList, deleteArticle } from "../../api/article";
import { timestampToTime } from "../../utils/date";

export default {
  components: {
    DialogInfo,
    DialogEditInfo
  },
  setup(props, { root}) {
    const { str, confirm } = useConfirm();

    /** === === === === === === data === === === === === ===*/
    //#region
    // 信息弹窗标记
    const dialog_info = ref(false);
    const dialog_info_edit = ref(false);
    const editId = ref(null);
    //查询表单数据
    const options = reactive([
      {
        value: 1,
        label: "国际信息"
      },
      {
        value: 2,
        label: "国际信息2"
      },
      {
        value: 3,
        label: "国际信息3"
      }
    ]);
    const options2 = reactive([
      { value: "id", label: "ID" },
      { value: "title", label: "标题" }
    ]);
    const category_value = ref("");
    const date_value = ref([]);
    const search_key = ref("");
    const search_value = ref("");
    // 表格数据
    const tableData = reactive({
      item: [
        {
          title: "1123在爱情代表什么意思",
          category: "",
          date: "2016-05-02",
          user: "王小虎"
        },
        {
          title: "1123在爱情代表什么意思",
          category: "",
          date: "2016-05-02",
          user: "王小虎"
        },
        {
          title: "1123在爱情代表什么意思",
          category: "",
          date: "2016-05-02",
          user: "王小虎"
        },
        {
          title: "1123在爱情代表什么意思",
          category: "",
          date: "2016-05-02",
          user: "王小虎"
        }
      ],
      total: 100,
      pageNumber: 1,
      pageSize: 10,
      loading: false,
      selectedItem: []
    });
    //#endregion

    /** === === === === === === method === === === === === ===*/
    //#region
    const handleSizeChange = val => {
      tableData.pageSize = val;
    };
    const handleCurrentChange = val => {
      tableData.pageNumber = val;
      // 点太快 应该取消掉之前的请求
      getList();
    };
    const confirmDelete = value => {
      console.log("confirmDelete:", value);
      deleteArticle({ id: tableData.selectedItem }).then(data => {
        tableData.selectedItem = [];
        getList();
      });
    };
    const deleteItem = id => {
      tableData.selectedItem = [id];
      confirm({
        content: "确认删除当前信息, 确认后将无法恢复!!",
        tip: "警告",
        fn: confirmDelete,
        id: "1"
      });
    };
    const deleteAll = () => {
      console.log("tableData.selectedItem:", tableData.selectedItem);
      if (!tableData.selectedItem.length) {
        root.$message({
          message: "请选择要删除的数据",
          type: "error"
        });
        return false;
      }
      confirm({
        content: "确认删除当前信息, 确认后将无法恢复!!",
        tip: "警告",
        fn: confirmDelete,
        id: "1"
      });
    };
    const toDate = (row, column, cellValue, index) => {
      return timestampToTime(row.date);
    };
    const toCategory = (row, column, cellValue, index) => {
      // return options.filter(item => item.value == row.categoryId)[0].label;
      return 111;
    };
    const handleSelectionChange = vals => {
      tableData.selectedItem = vals.map(item => item.id);
    };
    const getList = () => {
      tableData.loading = true;
      const requestData = formData();
      getArticleList(requestData)
        .then(data => {
          tableData.item = data;
        })
        .finally(() => [(tableData.loading = false)]);
    };
    const formData = () => {
      const requestData = {
        pageNumber: tableData.pageSize,
        pageSize: tableData.pageNumber
      };
      // 分类ID
      if (category_value.value) requestData.categoryId = category_value.value;
      // 日期
      if (date_value.value.length > 0) {
        requestData.startTime = date_value.value[0];
        requestData.endTime = date_value.value[1];
      }
      // 关键字
      if (search_key.value && search_value.value)
        requestData[search_key.value] = search_value.value;
      return requestData;
    };
    // const search = () => {
    //   getList()
    // };
    const editInfo = id => {
      console.log("id:", id);
      editId.value = id;
      dialog_info_edit.value = true;
    };
    const detailed = (row) => {
      root.$store.commit("articleDetail/UPDATE_STATE_VALUE", {
        id: {
          value: row.id,
          cacheKey: "articleId"
        },
        title: {
          value: row.title,
          cacheKey: "articleTitle"
        }
      });

      root.$router.push({
        path: "/article/detail",
        params: row
      });
    };
    //#endregion

    onMounted(() => {
      //getTag
      //getCate
      getList();
    });

    return {
      dialog_info,
      dialog_info_edit,
      editId,
      options,
      category_value,
      date_value,
      options2,
      search_key,
      search_value,
      tableData,
      formInline: {},
      handleSizeChange,
      handleCurrentChange,
      deleteItem,
      deleteAll,
      toDate,
      toCategory,
      handleSelectionChange,
      getList,
      editInfo,
      detailed
      // search
    };
  }
};
</script>

<style lang="scss" scoped></style>
